<template>
  <div class="transfer" style="background-color: #F7F7F7;height: 100vh;">
     <mt-header fixed :title="$t('change_password')">
      <router-link to="" slot="left" style="text-decoration: none;color: #fff;">
        <mt-button @click="$router.back(-1)" icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div style="width:100%;height:.8rem;"></div>
    <div style="margin: 2rem .5rem;text-align: center;color: #fff;">
      <mt-field  type="text" v-model="form.mobile" readonly></mt-field>
      <mt-field  class="input-wrap" :placeholder="$t('input_code') " type="number" v-model="form.code" >
        <mt-button class="code-btn" size="large">{{$t('get_verification_code')}}  </mt-button>
      </mt-field>
      <mt-field  :placeholder="$t('Please_enter_a_new_password') " type="password" v-model="form.password"></mt-field>
      <!-- <mt-field :label="$t('new_password')" :placeholder="$t('password') " type="password" v-model="form.password"></mt-field> -->
      <!-- <mt-field :label="$t('repeat_password')" :placeholder="$t('password') " type="password" v-model="form.password_repetition"></mt-field> -->

      <div class="withdraw_button"><button @click="change">{{$t('confirm')}}</button></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        mobile:'15500000000',
        password: '',
        password_repetition: '',
        group: 'app',
        code: '1234'
      }
    };
  },
  methods: {
    change() {
      if (this.form.password === this.form.password_repetition) {
        this.$post('v1/site/up-pwd', this.form).then(res => {
          if (res.code == 200) {
            this.$layer.msg(res.message || '修改成功！');
            (this.form.username = ''), (this.form.password = ''), (this.form.password_repetition = '');
          } else {
            this.$layer.msg(res.message || '修改失败！请重试！');
          }
        });
      } else {
        this.$layer.msg('密码不一致！');
      }
    }
  }
};
</script>

<style  scoped>
/deep/ .mint-cell-wrapper{
  background: #F7F7F7;
  color: #000;
  border-bottom: 1px solid #DBDBDB;
}
/deep/ .mint-field-core{
  background: #F7F7F7;
  color: #000;
}
/deep/ .mint-header{
   background: #fff;
   color: #000;
}
.code-btn{
  background: #F08E47;
  font-size: .3rem;
  color: #fff;
  height:.7rem;
  padding: 0 .25rem;
}
.tranfers_content {
  width: 100%;
  height: 1.5rem;
  color: #fff;
  background: #78bdf1;
  margin-top: 0.5rem;
  font-size: 0.5rem;
  line-height: 1.4rem;
  padding: 0 0.5rem;
  box-sizing: border-box;
  border-radius: 5px;
}
.withdraw_button {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}
.withdraw_button button {
  width:9rem;
  height: 1.2rem;
  border: none;
  font-size:.4rem;
  background: #F08E47;
  color: #fff;
  letter-spacing: 1px;
  border-radius: 5px;
  outline: none;
}
</style>
